$num : 12;
$wi : 390;

@function w ($s) {
   @return calc($s / ($wi / $num ))+rem
}

.zs_title {
   height: w(120);
   padding: w(10) 0;
   font-size: w(16);
   display: flex;
   justify-content: left;
   border-bottom: w(5) solid rgba(180, 180, 180, 0.1);

   .userhead {
      @mixin head {
         width: w(120);
         height: w(120);
      }

      @include head;
      border-radius: 50%;
      background-color: rgb(92, 43, 165);
      overflow: hidden;
      text-align: center;

      img {
         @include head
      }
   }

   /* userhead */
   .userinfo {

      height: w(120);



      .title {
         font-size: w(38);
         padding: w(5) w(5);
      }

      .brief {
         font-size: w(16);
         padding: w(5) w(8);
         border-radius: w(15);
         color: white;
         text-align: left;
         background-color: rgb(231, 43, 134);
         margin-top: 5px;
      }
   }
}

@mixin pos {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -80%);
}

.zs_expense {
   height: w(130);
   display: flex;
   border-bottom: w(5) solid rgba(195, 190, 194, 0.1);



   .shop {
      flex: 1;
      position: relative;

      .insert {
         font-size: w(16);
         padding: w(4) w(8);
         color: white;
         background-color: rgb(231, 43, 134);
         border-radius: 20px;
         position: absolute;
         left: w(2);
         top: w(2);
      }

      img {
         width: w(40);
         height: w(40);
         padding: w(5);
         @include pos
      }

      p {
         font-size: w(20);
         @include pos;
         top: w(95)
      }
   }

   .wallet {
      flex: 1;
      position: relative;

      img {
         width: w(50);
         height: w(50);
         @include pos
      }

      p {
         font-size: w(20);
         @include pos;
         top: w(95)
      }
   }
}

@mixin icoimg {
   width: w(25);
   height: w(25);
}

.zs_dreame {
   height: w(80);
   border-bottom: w(10) solid rgba(195, 190, 194, 0.1);
   position: relative;

   .row {
      font-size: w(16);
      height: w(25);
      line-height: w(25);
      display: flex;
      justify-content: left;

      @include pos;

      transform: translateY(-50%);
      left: w(5);

      img {
         @include icoimg;
         margin: 0 w(5);
      }
   }

   .arrows {
      font-size: w(16);
      width: w(20);
      position: absolute;
      right: w(5);
      top: 50%;
      transform: translateY(-50%);

   }
}

.zs_list {

   .item {
      height: w(50);
      border-bottom: w(2) solid rgba(195, 190, 194, 0.1);
      position: relative;

      .row {
         font-size: w(16);
         height: w(25);
         line-height: w(25);
         display: flex;
         justify-content: left;

         @include pos;
         left: w(5);
         transform: translateY(-50%);

         img {
            @include icoimg;
            margin: 0 w(5);
         }
      }

      .arrows {
         font-size: w(16);
         width: w(20);
         position: absolute;
         right: w(5);
         top: 50%;
         transform: translateY(-50%);

      }
   }
}